<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../../cssmui/mui.min.css" rel="stylesheet" />
		<link href="../../css/mylist.css" rel="stylesheet" />
		<link href="../../css/icons-extra.css" rel="stylesheet" />
	
		<link href="../../cssmui/mui.picker.min.css" rel="stylesheet" />
		<script src="../../mui/mui.min.js"></script>
		<script src="../../mui/common.js"></script>
		<script src="../../mui/mui.picker.min.js"></script>
	
	
		<script src="../../js/loadpicker.js"></script>
		<style type="text/css">
			.mui-bar-popover {
				width: 30%;
			}
			
			.list-img {
				margin-right: 10px;
				width: 60px;
				height: 60px;
			}
			
			.list-row {
				height: 60px;
			}
			
			.bar_top {
				margin-top: 10px;
			}
		</style>

	</head>

	<body>

		<div id="offCanvasWrapper" class="mui-off-canvas-wrap mui-draggable mui-bg-negative">
			<!--侧滑菜单部分-->
			<aside id="offCanvasSide" class="mui-off-canvas-right " style="background-color: #F0F0F0;">
				<div id="offCanvasSideScroll" class="mui-scroll-wrapper">
					<div class="mui-scroll ">

						<h4 style="margin: 10px;">搜索条件</h4>
						<hr>
						<form>
							<div style="margin: 10px;">

								<input type="text" name="sdate" id="sdate" value="" placeholder="开始日期" />
								<input type="text" name="edate" id="edate" value="" placeholder="结束日期" />
								<input type="text" name="gys" id="gystext" value="" placeholder="供应商" />
								<input type="text" name="kh" id="kh" value="" placeholder="客户" />
								<br>
								<span id="searchsubmit" style="margin-right:10px" class="mui-btn mui-btn-blue mui-pull-right">查看</span>
							</div>

						</form>
					</div>
				</div>
			</aside>
			<!--主界面部分-->
			<div class="mui-inner-wrap">
				<header class="mui-bar mui-bar-nav">
					<a class="mui-action-back mui-icon mui-icon-back mui-pull-left"></a>

					<a><span id="offCanvasShow" class="mui-icon-extra mui-icon-extra-filter bar_top mui-pull-right"></span></a>
					<h1 class="mui-title">账单</h1>
				</header>

				<div id="offCanvasContentScroll" class="mui-content mui-scroll-wrapper">
					<div class="mui-scroll">
						<div class="mui-card minfo" id="infobtn">
							<div class="mui-card-content">
								<div id="info_div" class="mui-card-content-inner mui-h3  mui-row">
									合计

								</div>
							</div>
						</div>
						<ul class="mui-table-view ">

							<li class="mui-table-view-cell list-row">
								<a>
									<div class="">
										<p> <span class="mui-h4">客户：xxx ccc </span>
											<span class="mui-h3 mui-pull-right mui-badge-danger">+ 9830.00</span>
										</p>
										<p> <span class=" mui-pull-left">2017-9-9 20:00</span>

										</p>
									</div>
								</a>
							</li>
							<li class="mui-table-view-cell list-row">
								<a>
									<div class="">
										<p> <span class="mui-h4">供应商：xxx ccc </span>
											<span class="mui-h3 mui-pull-right mui-badge-green">- 9830.00</span>
										</p>
										<p> <span class=" mui-pull-left">2017-9-9 20:00</span>

										</p>
									</div>
								</a>
							</li>
							<li class="mui-table-view-cell list-row">
								<a>
									<div class="">
										<p> <span class="mui-h4">供应商：xxx ccc </span>
											<span class="mui-h3 mui-pull-right mui-badge-green">- 9830.00</span>
										</p>
										<p> <span class=" mui-pull-left">2017-9-9 20:00</span>

										</p>
									</div>
								</a>
							</li>
							<li class="mui-table-view-cell list-row">
								<a>
									<div class="">
										<p> <span class="mui-h4">供应商：xxx ccc </span>
											<span class="mui-h3 mui-pull-right mui-badge-green">- 9830.00</span>
										</p>
										<p> <span class=" mui-pull-left">2017-9-9 20:00</span>

										</p>
									</div>
								</a>
							</li>
							<li class="mui-table-view-cell list-row">
								<a>
									<div class="">
										<p> <span class="mui-h4">供应商：xxx ccc </span>
											<span class="mui-h3 mui-pull-right mui-badge-green">- 9830.00</span>
										</p>
										<p> <span class=" mui-pull-left">2017-9-9 20:00</span>

										</p>
									</div>
								</a>
							</li>

						</ul>
					</div>
				</div>

				<!-- off-canvas backdrop -->
				<div class="mui-off-canvas-backdrop"></div>
			</div>
		</div>
		<script>
			mui.init({
				swipeBack: false,
				beforeback: back
			});
			mui.ready(function() {
				//级联示例
				
				var gysMenu = [{
					value: 'ywj',
					text: '董事长 叶文洁'
				}, {
					value: 'aaa',
					text: '总经理 艾AA'
				}, {
					value: 'lj',
					text: '罗辑'
				}];
				loadPicker('gystext', gysMenu);
				var khMenu = [{
					value: 'ywj',
					text: '客户 叶文洁'
				}, {
					value: 'aaa',
					text: '客户 艾AA'
				}, {
					value: 'lj',
					text: '客户 罗辑'
				}];
				loadPicker('kh', khMenu);
				loadDateTimePicker('sdate');
				loadDateTimePicker('edate');
			});
			//侧滑容器父节点
			var offCanvasWrapper = mui('#offCanvasWrapper');
			//主界面容器
			var offCanvasInner = offCanvasWrapper[0].querySelector('.mui-inner-wrap');
			//菜单容器
			var offCanvasSide = document.getElementById("offCanvasSide");

			//移动效果是否为整体移动
			var moveTogether = false; //侧滑容器的class列表，增加.mui-slide-in即可实现菜单移动、主界面不动的效果；
			var classList = offCanvasWrapper[0].classList;
			classList.add('mui-slide-in');
			//主界面‘显示侧滑菜单’按钮的点击事件
			document.getElementById('offCanvasShow').addEventListener('tap', function() {
				offCanvasWrapper.offCanvas('show');

			});

			function back() {}

			//主界面和侧滑菜单界面均支持区域滚动；
			mui('#offCanvasSideScroll').scroll();
			mui('#offCanvasContentScroll').scroll();

			//实现ios平台原生侧滑关闭页面；
			if(mui.os.plus && mui.os.ios) {
				mui.plusReady(function() { //5+ iOS暂时无法屏蔽popGesture时传递touch事件，故该demo直接屏蔽popGesture功能
					plus.webview.currentWebview().setStyle({
						'popGesture': 'none'
					});
				});
			}
		</script>
	</body>

</html>